<!DOCTYPE html>
<html>

<head>
    <title>Custom Frame Rate Animation</title>
</head>

<body>
    <canvas width="1000" height="800"></canvas>
    <script>
        const canvasElem = document.querySelector('canvas')

        // 设置帧率
        const fps = 24

        const ctx = canvasElem.getContext('2d')


        const rectSize = 100



        video = document.createElement('Video');
        video.src = './src/528d9376-f0fd-4445-9840-13e7559d6056.webm';
        // video.src = './src/81fac2e1-d957-4a19-b86d-093daed0ef71.webm'
        // video.controls = true;
        video.muted = true
        video.loop = true
        video.autoplay = true
        video.style.opacity = 0

        document.body.append(video)


        function draw() {
            ctx.clearRect(0, 0, canvasElem.width, canvasElem.height);

            // 画方形
            ctx.save();


            ctx.fillStyle = '#eee'
            ctx.fillRect(0, 0, 1000, 600)

            // ctx.translate(200, 200)
            // const time = new Date();
            // ctx.rotate(
            //     (
            //         ((2 * Math.PI) / 60) * time.getSeconds() +
            //         ((2 * Math.PI) / 60000) * time.getMilliseconds()
            //     ) * 24,
            // );
            // ctx.fillStyle = '#ddd'
            // ctx.fillRect(rectSize / -2, rectSize / -2, rectSize, rectSize)


            ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight)  //绘制视频
            // ctx.restore();
        }


        // window.requestAnimationFrame(draw);

        // setInterval(() => {
        //     draw()
        // }, 1000 / fps)

        // render()
        // function render() {
        //     window.requestAnimationFrame(render)
        //     ctx.clearRect(0, 0, canvasElem.width, canvasElem.height)
        //     ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight)  //绘制视频
        // }


        video.addEventListener('play', () => {
            var timer = setInterval(() => {
                if (!video.paused && !video.ended) {
                    ctx.clearRect(0, 0, canvasElem.width, canvasElem.height)
                    ctx.drawImage(video, 0, 0)
                } else {
                    clearInterval(timer)
                }
            }, 1000 / 30)
        }, false)
    </script>
</body>

</html>